<template>
  <div id="main1">

  </div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted } from "vue"
import * as echarts from 'echarts';
import { useStore } from "vuex";
const store=useStore()
var option;

option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [...store.state.bing]
    }
  ]
};
onMounted(() => {

  setTimeout( () => {
    var chartDom = document.getElementById('main1');
    var myChart = echarts.init(chartDom);
    option && myChart.setOption(option);
  }, 1000)

})

</script>
<style lang="scss" scoped>
#main1 {
  width: 100%;
  height: 100%;
}
</style>